<template>
  <div>
    <scroller lock-x  @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="50">
      <div>
        <Banner></Banner>
        <panel :list="foodlist" :type="type"></panel>
        <load-more v-show="foodlist.length" tip="loading"></load-more>
        <div style="text-align: center" v-show="foodlist.length==0">暂无食物</div>
      </div>
    </scroller>

  </div>
</template>

<style>
  .banner {
    background: #0bb20c;
  }
</style>

<script>
  import {Panel, Group, Radio,Scroller, Divider, Spinner, XButton,  Cell, LoadMore} from 'vux'
  import Banner from './widget/Banner.vue'
  export default {
    name:'Shaoliang',
    components: {
      Banner,
      Panel,
      Group,
      Radio,Scroller, Divider, Spinner, XButton,  Cell, LoadMore
    },
    data () {
      return {
        speciesId:2,//食物分类
        apiUrl: apiUrl,
        apiImgPath:apiImgPath,
        type: '1',
        page:1,
        pulldown:true,
        foodlist: []
      }
    },
    mounted() {
      this.$nextTick(function () {
        this.load(); //概况
      }),
              this.$nextTick(() => {
                this.$refs.scrollerBottom.reset({top: 0})
              })
    },
    methods: {
      //分类
      load() {
        if (this.pulldown == false) {
          return;
        }
        //禁止加载
        this.pulldown = false;
        this.$http.get(this.apiUrl + 'Food/foods', {
          params: {
            'species_id': this.speciesId,
            'page': this.page
          }
        }).then(response => {
          var data = response.data.list;
          data.forEach((item, index)=> {
            var food = {
              src: item.thumb ? this.apiImgPath + item.thumb : '',
              title: item.name,
              desc: item.description,
              url: '/Food/' + item.id
            };
            this.foodlist.push(food);
          });
          //处理页面和可加载状态
          this.pulldown = true;
          this.page++;
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
//                    this.currentPage = this.$route.params.page ? this.$route.params.page : 1;
        }, response => {
          this.$message.error('加载失败');
          console.log(response);
        });


      },
      onScrollBottom () {
        this.load()
      },
      onScroll (pos) {
        this.scrollTop = pos.top
      },
      changeList () {
        this.$nextTick(() => {
          this.$refs.scroller.reset({
            top: 0
          })
        })
      }
    }

  }
</script>